<template>
    <div class="_video-player">
        <div v-show="url" ref="videoEl" :id="'player-'+ playerId" class="_container"></div>
        <div v-show="!url" class="_no-video-url">
            <span>输入播放地址...</span>
        </div>
    </div>
</template>

<script>
import { ref, toRefs, watch, computed, onBeforeUnmount, onMounted } from 'vue'
import Player from 'xgplayer'
import HlsPlugin from 'xgplayer-hls'
import FlvPlugin from 'xgplayer-flv'
import { uuid } from '@/lib/util'
import 'xgplayer/dist/index.min.css'

export default {
    props: {
        url: { // 播放地址
            type: String,
            default: ''
        },
        poster: { // 视频封面图
            type: String,
            default: ''
        },
        autoplay: { // 是否自动播放
            type: Boolean,
            default: true
        },
        live: { // 是否直播
            type: Boolean,
            default: true
        },
        loop: { // 是否循环
            type: Boolean,
            default: true
        },
        fullevent: { // 是否监听/拦截fullscreen事件
            type: Boolean,
            default: false
        }
    },
    emits: ['full', 'ready'],
    setup (props, { emit }) {
        const playerId = ref(uuid())
        const { url, live, loop, fullevent, autoplay, poster } = toRefs(props)

        const videoType = computed(() => { // 视频类型
            if (/\.flv/.test(url.value)) {
                return 'flv'
            } else if (/\.mp4/.test(url.value)) {
                return 'mp4'
            } else if (/m3u8/.test(url.value)) {
                return 'hls'
            }
            return ''
        })
        const videoEl = ref(null)
        let playerObj = null // 播放器对象
        let currVideoType = '' // 当前视频类型
        const isPaused = ref(false) // 是否暂停
        let isReady = false

        const pause = () => { // 暂停
            if (playerObj && !playerObj.paused) {
                playerObj.pause()
            }
        }

        const rePlay = () => { // 继续播放
            if (playerObj && playerObj.paused) {
                playerObj.play()
            }
        }

        const doStartPlay = () => {
            isReady = false
            if (url.value) {
                if (!playerObj) {
                    const option = {
                        el: videoEl.value,
                        url: url.value,
                        isLive: live.value,
                        loop: loop.value,
                        lang: 'zh-cn',
                        playsinline: false,
                        videoFillMode: 'fill',
                        cssFullscreen: false,
                        playbackRate: false,
                        plugins: null
                    }
                    if (poster.value) {
                        option.poster = poster.value
                    }
                    if (autoplay.value) {
                        option.autoplay = true
                        option.autoplayMuted = true
                    } else {
                        option.autoplay = false
                    }
                    // console.log('videoType.value....', videoType.value)
                    if (videoType.value == 'hls') {
                        option.plugins = [HlsPlugin]
                    } else if (videoType.value == 'flv') {
                        option.plugins = [FlvPlugin]
                    }
                    playerObj = new Player(option)
                    currVideoType = videoType.value
                    // 拦截全屏操作
                    if (fullevent.value) {
                        playerObj.usePluginHooks('fullscreen', 'fullscreenChange', () => {
                            console.log('fullevent.value full....')
                            emit('full')
                            return false
                        })
                    }
                    playerObj.on('error', (error) => {
                        console.log('player error....', error)
                    })
                    playerObj.on('canplay', () => {
                        if (!isReady) {
                            emit('ready')
                            isReady = true
                        }
                    })
                } else {
                    if (currVideoType == videoType.value) {
                        playerObj.switchURL(url.value)
                        rePlay()
                    } else {
                        playerObj.destroy()
                        playerObj = null
                        setTimeout(() => { doStartPlay() }, 15)
                    }
                }
            }
        }

        const getVideoElement = () => { // 获取Video DOM元素
            return videoEl?.value?.querySelector('video')
        }

        watch(url, (newVal) => {
            if (newVal) {
                doStartPlay()
            } else {
                if (playerObj) { // 销毁之
                    console.log('销毁之....')
                    playerObj.destroy()
                    playerObj = null
                }
            }
        })

        onMounted(() => {
            if (url.value) {
                doStartPlay()
            } else {
                setTimeout(() => { doStartPlay() }, 800)
            }
        })

        onBeforeUnmount(() => {
            if (playerObj) {
                playerObj.destroy()
                playerObj = null
            }
        })

        return {
            videoEl,
            isPaused,
            doStartPlay,
            pause,
            rePlay,
            getVideoElement,
            playerId
        }
    }
}
</script>

<style lang="scss">
    @use "./xgPlayer.scss";
</style>
